How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

By default, your normal items within a mega submenu will be visible when the submenu is opened. By leaving the Submenu Type set to “Auto”, these column items become stacks. If you switch the Submenu Type to Mega or Flyout, you will get a dropdown instead, and this article deals with that situation. Flyouts within Mega Submenus are not recommended I do not generally recommend using dropdowns within mega submenus. This is generally confusing for users and leads to bad UX, so you should consider whether this is really the best format for your submenu. Generally, better formats would include using Tabs or else Flyout submenus as your first level and mega submenus as your second level. These formats achieve similar effects (hidden content revealed on activation within a submenu) in a more structured format. Enabling Dropdowns within Mega Submenus If you wish to allow dropdowns within a mega submenu, you can enable that in the Control Panel > Main UberMenu Configuration > Submenus > Allow Dropdown within Mega Submenu Please note: if you enable this setting, you cannot use the “Slide” submenu transition. This is because the slide transition requires hidden overflow to work, while dropdowns within mega submenus requires visible overflow to work. If you want to use this setting, you must switch to a Transition other than Slide Multi-level mega submenus (intended use case) One good use (really the intended one) for this is to allow a single-line submenu to have additional mega submenus so that you can have a double-level mega menu. This is a very specific scenario, however. Here’s the result when using the setting as intended:

Since UberMenu 3.7 Dropdown submenus By default, submenus on mobile will drop down, meaning that when they are open they will overlap other content in the menu/site. This is generally preferable for inline menus, which displace other content on the site when they open. Using dropdowns limits the scrolling required to navigate the menu. Accordion submenus Accordion submenus are a new option in v3.7 to complement the Modal Mobile menu. Accordion submenus push down items below them rather than overlapping. This option is optimized for the Modal mobile menu option, which appears in its own modal window and scroll context. Note that if you use a 2-column layout for tablets, accordion mode will be disabled as this is incompatible.

Appearance > Menus > Menu Item Settings > Submenu Submenu Types There are 3 types of submenus: Mega, Flyout, and Stack. Mega A mega submenu is a dropdown submenu which contains multiple columns of content. All levels of the submenu menu are shown at once. See also Submenu Columns Submenu Position Submenu Width Submenu Bounds (Maximum Submenu Width) Mega Submenu Layouts Video Tutorial: How to recreate the UberMenu 3 Mega Menu Submenu Flyout A flyout submenu is a dropdown submenu which contains a single column of content representing a single level of the menu tree structure. Additional submenus are displayed to the left or right of the main submenu when hovering over an item that has child items. See also Submenu Position How to create the UberMenu 3 Flyout Submenu Stack A stack submenu is a static submenu which is always visible when its parent item is visible. Its contents are stacked vertically. This submenu type wraps the third level of items in a mega submenu. Automatic Submenu Type By default, UberMenu will manage the submenu type for each item automatically. These are the defaults: Top level By default, all top level items will have Mega submenus. To create a flyout submenu, just change the type to Flyout Submenu of Flyout By default, all submenus of flyout menus will also be flyouts. Submenu of Mega By default, all submenus inside a mega submenu will be stacks. This should not be changed. Setting the Submenu Type To change the submenu type to something other than the automatic type, open the settings for the submenu’s parent item and click the Submenu tab.